<template>
  <div class="body-contant">
    <el-container>
      <el-header>
        <Header />
      </el-header>

      <el-main>
        <!-- 轮播图 -->
        <div id="test" style="margin-top: 4rem">
          <Rotation />
        </div>
        <div id="test">
          <el-container>
            <el-container class="el-f1">
              <!-- 新闻推荐 -->
              <el-main>
                <!-- Tab 标签页 -->
                <div class="tab_sty" style="margin-bottom: 15px">
                  <el-tag
                    v-for="item in items"
                    :key="item.label"
                    :type="item.type"
                    effect="plain"
                    @click="clickTO(item.url, item.id)"
                    style="text-align: center; margin-left: 50px"
                  >
                    {{ item.label }}
                  </el-tag>
                </div>
                <router-view style="margin-left: 1rem"></router-view>
              </el-main>
            </el-container>

            <el-container class="el-f2">
              <!-- 热点卡片 -->
              <el-main class="card-main">
              <!-- 48小时热点卡片 -->
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>48小时热点</span>
                    <el-button
                      style="float: right; padding: 1px 0"
                      type="text"
                      @click="clickToMore"
                      >更多>></el-button
                    >
                  </div>
                  <div
                    v-for="o in readTopList"
                    :key="o.articlesId"
                    class="text item hot"
                    @click="handlexinwen(o.articlesId)"
                  >
                    <el-link sype="primary">
                      {{ o.articleName }}
                    </el-link>
                  </div>
                </el-card>

                <!-- 10天热点卡片 -->
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>10天内热点(点赞热榜)</span>
                    <el-button
                      style="float: right; padding: 3px 0"
                      type="text"
                      @click="clickToMore"
                    >
                      更多>>
                    </el-button>
                  </div>
                  <div
                    v-for="o in TopLike"
                    :key="o.index"
                    class="text item hot"
                    @click="handlexinwen(o.id)"
                  >
                    <el-link sype="primary">
                      {{ o.articleName }}
                    </el-link>
                  </div>
                </el-card>

                <!-- 热点评论卡片 -->
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>10天内热评</span>
                    <el-button
                      style="float: right; padding: 3px 0"
                      type="text"
                      @click="clickToMore"
                    >
                      更多>>
                    </el-button>
                  </div>
                  <div
                    v-for="o in TopComments"
                    :key="o.index"
                    class="text item hot"
                    @click="handlexinwen(o.id)"
                  >
                    <el-link sype="primary">
                      {{ o.articleName }}
                    </el-link>
                  </div>
                </el-card>
              </el-main>
            </el-container>
          </el-container>
        </div>
      </el-main>
      <el-divider></el-divider>
      <el-footer>
        <Footer />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Rotation from "../components/Rotation.vue";
import Footer from "../components/Footer.vue";
import axios from "axios";
import { TopLikeCount, GetArticleOne, GetArticleType, TopComment, getReadTop } from "../api/user"
export default {
  data () {
    return {
      //   tap 标签页数据
      items: [

      ],
      url: [
        { type: "", url: "shishi" },
        { type: "", url: "gongsi" },
        { type: "", url: "fengcai" },
        { type: "", url: "women" },
      ],
      hotJournalism: [],
      TopLike: [

      ],
      TopComments: [

      ],
      readTopList: [

      ]
    };
  },
  components: {
    Header,
    Footer,
    Rotation,
  },
  methods: {
    //阅读排行榜
    getTop: function () {
      getReadTop().then(({ data }) => {
        console.log(data);
        this.readTopList = data.data
      })
    },
    // 标签页跳转
    clickTO: function (url, id) {
      if (url == "women") {
        window.open("/women");
      } else {
        this.$router.push({ name: url, params: { key: id } });
      }
    },
    // 热点卡片跳转
    clickTOLink: function (id) {
      if (id == 1) {
        // 2日热点
        this.$router.push("towhot");
      } else if (id == 2) {
        // 10日热点
        this.$router.push("tenhot");
      } else {
        // 10日热评
        this.$router.push("tenbuss");
      }
    },
    clickToMore: function () {
      this.$router.push("/more");
    },
    //把点击的新闻id传输到目标页面，并跳转
    handlexinwen: function (id) {

      this.$router.push({ name: "aaaa", params: { key: id } });
      setTimeout(() => {
        location.reload();
      }, 100);
    },
    //填充新闻
    getArticles: function () {
      axios
        .get("https://cms.zt118.top/article/Articles")
        .then((res) => {
          res.data.data.forEach((item) => {
            if (item.isDeleted == false && item.isActived == true) {
              this.journalismForm.push(item);
            }
          });
        })
        .catch();
    },
    //点赞排行榜
    UserLikeTop: function () {
      TopLikeCount().then((res) => {
        res.data.data.forEach(item => {
          GetArticleOne(item.articlesId).then((res) => {
            if (res.data.data.isActived == true && res.data.data.isDeleted == false) {
              this.TopLike.push({
                articleName: res.data.data.articleName,
                id: item.articlesId

              })
            }
          })
        })
      }).catch()
    },
    //评论排行榜
    UserCommentTop: function () {
      TopComment().then((res) => {
        res.data.data.forEach(item => {
          GetArticleOne(item.articlesId).then((res) => {
            if (res.data.data.isActived == true && res.data.data.isDeleted == false) {
              this.TopComments.push({
                articleName: res.data.data.articleName,
                id: item.articlesId
              })
            }
          })

        })

        console.log(this.TopComments);

      }).catch()
    },
    //获得所有类型名
    GetType: function () {
      GetArticleType().then((res) => {

        res.data.data.forEach(item => {
          this.items.push({
            label: item.articleTypeName,
            id: item.id
          })
        });
        //使得每一个数组内的对象都合并 
        for (let index = 0; index < this.items.length; index++) {
          Object.assign(this.items[index], this.url[index])
        }
      }).catch();
      console.log(this.items);
    },
    hotJournalism1: function () {
      axios
        .get("https://cms.zt118.top/article/Articles")
        .then((res) => {
          res.data.data.forEach((item) => {
            if (item.isDeleted == false && item.isActived == true) {
              this.hotJournalism.push(item);
            }
          });
        })
        .catch();
    },
  },
  // 把点击的新闻id传输到目标页面，并跳转
  handlehot: function (id) {
    this.$router.push({ name: "aaaa", params: { key: id } });
  },
  mounted: function () {
    this.hotJournalism1();
    this.UserLikeTop();
    this.GetType();
    this.UserCommentTop();
    this.getTop()
  },
};
</script>

<style scoped>
.el-divider {
  background-color: rgb(133, 128, 128);
}
.el-container {
  background-color: rgb(245, 245, 245);
}
.el-header {
  padding-left: 50px;
  padding-right: 50px;
  position: fixed;
  align-items: center;
  justify-content: flex-end;
  background-color: rgb(197, 245, 245);
  z-index: 9999;
  width: 100%;
}
.el-main {
  padding: 0px;
}
.el-footer {
  padding: 0px;
  height: 20px !important;
}
.el-header h3 {
  float: left;
}
/* 标签页不可选，仿按钮 */
.el-main .tab_sty .el-tag {
  /* user-select: none; */
  width: 8rem;
  margin-left: 5rem;
}

.el-main .tab_sty {
  margin-top: 1rem;
  /* display: flex; */
  align-items: center;
  justify-content: flex-end;
  /* background-color: rgb(197, 245, 245); */
}
#test {
  /* width: 800px; */
  margin: auto;
}
/* lin_frontend */

* {
  margin: 0px;
  padding: 0px;
  /* user-select: none; */
}
.clearfix span {
  user-select: none;
}

/* 标签按钮的静态央视 */
.el-tag {
  margin-left: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
}
/* 标签页按钮悬浮特效 */
.el-tag:hover {
  border-color: rgb(64, 137, 243);
}

.el-main .card-main {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  padding-bottom: 0rem;
}
.el-tabs_nav-scroll {
  border: none;
  border-width: 1px;
  /* background-color: aquamarine */
}
/* 新闻推荐卡片效果 */
.s {
  cursor: pointer;
}
.s:hover {
  color: rgb(53, 163, 236);
}
.el-f1 {
  width: 80%;
  float: left;
}
.el-f2 {
  float: left;
  /* background-color: aliceblue; */
  width: 19%;
  margin-left: 1px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 9px;
  user-select: none;
}

.hot p:hover {
  color: rgb(53, 163, 236);
  /* border-bottom: solid 1px; */
  width: auto;
  cursor: pointer;
  user-select: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  /* height: 23%; */
  margin-bottom: 1rem;
}
</style>
